<template>
  <div class="box">
    <div class="box-header">
      <h3 class="box-title">TEST</h3>
      <div class="box-tools">
        <div class="input-group input-group-sm" style="width: 450px;">
          <div class="input-group-btn">
            <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {{searchField}} <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#" v-on:click="searchCondSelHandler('用户名', 'userName')">用户名</a></li>
              <li><a href="#" v-on:click="searchCondSelHandler('登录名', 'loginName')">登录名</a></li>
              <li><a href="#" v-on:click="searchCondSelHandler('手机号', 'mobileNo')">手机号</a></li>
            </ul>
          </div>
          <input type="text" name="table_search" class="form-control pull-right" placeholder="请输入内容" v-bind="searchCond">
          <div class="input-group-btn">
            <a class="btn btn-default" v-on:click="getUserList"><i class="fa fa-search"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="box-body table-responsive no-padding">
        <table id="userTable" class="table table-bordered table-hover table-striped">
          <thead>
            <tr>
              <th>用户名</th>
              <th>登录名</th>
              <th>手机号</th>
              <th>邮箱</th>
              <th>最后登录时间</th>
              <th>最后登录IP</th>
              <th>创建时间</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="item in list">
              <tr v-bind:key="item.id">
                <td>{{item.userName}}</td>
                <td>{{item.loginName}}</td>
                <td>{{item.mobileNo}}</td>
                <td>{{item.email}}</td>
                <td>{{item.lastLoginTime}}</td>
                <td>{{item.lastLoginIp}}</td>
                <td>{{item.createTime}}</td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
  </div>
</template>
<script>
import fetch from '@/libs/fetch'
export default {
  name: 'UserList',
  data () {
    return {
      searchField: '用户名',
      searchCond: '',
      list: []
    }
  },
  created () {
    this.getUserList(this)
  },
  methods: {
    searchCondSelHandler: function (searchField, fieldName) {
      this.searchField = searchField
    },
    getUserList: function (obj) {
      let condData = {
        pageNum: 1,
        pageSize: 10,
        loginName: this.searchCond
      }
      fetch.post('/api/sys/user/list', condData, function (d) {
        this.list = d.list
      })
    }
  }
}
</script>
